<template>
  <div class="main app-container">
    <div class="main-container">
      <div class="cbox">
        <el-form class="form" :model="flt" :inline="true"  ref="fltForm">
          <!-- <el-row :gutter="12" class="row">
            <el-col :span="5"> -->
              <el-form-item size="mini" label="角色名称:" prop="rleName" >
                <el-input
                  clearable
                  maxlength="48"
                  v-model="flt.rleName"
                  size="mini"
                  style="width:180px"
                ></el-input>
              </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="5"> -->
              <el-form-item size="mini" label="角色类型:" prop="rleCUuid" >
                <el-select
                  :disabled="disabled"
                  clearable
                  v-model="flt.rleCUuid"
                  style="width:180px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in roletype"
                    :key="index"
                    :value="item.code"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="2"> -->
              <el-form-item size="mini">
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
            <!-- </el-col> -->
          <!-- </el-row> -->
          <el-row :gutter="10" class="row">
            <el-col :span="24">
              <el-form-item size="mini" label-width="0px">
                <button-name @clickEvent="clickEvent"></button-name>
                <!--                <el-button v-if="isAuth('add')" size="mini" type="primary" plain @click="addNew">新增</el-button>-->
                <!--                <el-button v-if="isAuth('edit')" size="mini" type="primary" plain @click="edit">编辑</el-button>-->
                <!--                <el-button v-if="isAuth('del')" size="mini" type="primary" plain @click="del">删除</el-button>-->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <div class="inner" ref="inner">
          <el-table
            :height="maxHeight"
            style="width: 100%"
            :data="sysroleList"
            :highlight-current-row="true"
            @row-click="rowClick"
            border
            :header-cell-style="{
              textAlign: 'center'
            }"
            @row-dblclick="view"
          >
            <el-table-column align="center" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="角色代码" prop="rleCode"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="角色名称" prop="rleName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="角色类型" prop="rleCUuidName">
              <!-- <template slot-scope="scope">
                <span>{{ ROLE_TYPE[scope.row.rleCUuid] }}</span>
              </template>-->
            </el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="备注" prop="remark"></el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination
        ref="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.PageSize"
        :layout="Pagination.layout"
        :total="Pagination.total"
      ></el-pagination>

      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showDialog"
        :visible.sync="showDialog"
        :title="operate"
      >
        <v-dialog
          :dialogmode="operate"
          :disabled="!isEditMode"
          @close="closeEdit"
          @save="saveFltInfo"
          :flt_info="currentFltInfo"
        ></v-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import VDialog from './dialog'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import isAuth from '@/mixins/buttonAuth'
import buttonName from '@/components/buttonName/button-name'

import {AddSysRole, checkSysroleList, delSysrole, editSysrole, getroleList} from '@/request/api'

export default {
  name: 'router.roleManagement',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      // 角色类型
      ROLE_TYPE: {
        1: '平台角色',
        2: '客户角色',
        3: '供应商角色'
      },
      // 查询的参数
      flt: {
        rleName: '',
        rleCUuid: ''
      },
      // 分页对象
      pagination: {
        currentPage: 1,
        pageSize: 30,
        total: 0
      },
      // 表格数据
      sysroleList: [],
      // 角色类型下拉框
      roletype: [],

      isEditMode: true,
      operate: '',
      showDialog: false,

      // 当前行数据
      currentRow: {},
      currentFltInfo: {},

      // 权限状态
      roleStatus: [],

      // 菜单校验
      rules: {
        rleName: [
          {min: 0, max: 48, message: '输入至多48个字符', trigger: 'blur'}
        ],
        rleCUuid: [
          {min: 0, max: 20, message: '输入至多20个字符', trigger: 'blur'}
        ]
      },
      maxHeight: -1
    }
  },
  components: {
    VDialog, buttonName
  },
  mounted() {
    this.getList()
    // 角色类型
    this.getRole()
  },
  computed: {
   
    grandson() {
      var dataList = []
      var number
      var arr = this.$route.path.split('/')
      number = arr.length - 1
      dataList = this.$store.state.user.permList
      for (var i = 0; i < dataList.length; i++) {
        for (var f = 0; f < dataList[i].Children.length; f++) {
          if (dataList[i].Children[f].MDL_CODE == arr[number]) {
            return dataList[i].Children[f].Grandson
          }
        }
      }
      return []
    }
  },
  methods: {
    // 获取列表数据
    getList() {
      checkSysroleList({
        rleName: this.flt.rleName,
        rleCUuid: this.flt.rleCUuid,
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }).then(res => {
        this.sysroleList = res.data
        this.updatePaginationTotal(res.total)
      })
    },
     clickEvent(val) {
      if (val.mdlCode === 'add') {
        this.addNew()
      }
      if (val.mdlCode === 'edit') {
        this.edit()
      }
      if (val.mdlCode === 'del') {
        this.del()
      }
    },
    addNew() {
      this.operate = this.DIALOG_MODE.ADD
      this.isEditMode = true
      this.currentFltInfo = {}
      this.showDialog = true
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.operate = this.DIALOG_MODE.EDIT
      this.isEditMode = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      this.showDialog = true
    },
    view(row) {
      this.operate = this.DIALOG_MODE.VIEW
      this.isEditMode = false
      this.currentFltInfo = Object.assign({}, row)
      this.showDialog = true
    },

    closeEdit() {
      this.showDialog = false
      this.currentRow ={}
      this.refreshList()
    },

    saveFltInfo(info) {
      switch (this.operate) {
      case this.DIALOG_MODE.ADD:
        AddSysRole(info).then(() => {
          this.$message({
            message: '新增成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      case this.DIALOG_MODE.EDIT:
        editSysrole(info).then(() => {
          this.$message({
            message: '编辑成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.currentRow = {}
          this.refreshList()
        })
        break
      default:
        break
      }
    },
    rowClick(row) {
      this.currentRow = row
    },
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        let leta = {}
        leta['uuid'] = this.currentRow.uuid
        leta['fltUuid'] = this.currentRow.fltUuid
        leta['version'] = this.currentRow.version
        delSysrole(leta).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          this.refreshList()
        })
      })
    },
    clearState() {
      this.currentRow = {}
      this.currentFltInfo = {}
    },
    getRole() {
      getroleList().then(res => {
        this.roletype = res.data
      })
    }
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    height: 100%;
    position: relative;
    width: 100%;
  }

  .main-container {
    height: 100%;
    width: 100%;
    position: relative;
    // padding: 0 12px;
    display: flex;
    flex-direction: column;

    .form {
      width: 100%;
      flex: 0 0 auto;

      .row {
        width: 100%;
        // margin: 10px 0;
        margin-bottom: 0;
      }
    }

    .table {
      flex: 1;
      overflow: hidden;
      position: relative;

      .inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
</style>
